<template>
  <el-form :model="form">
    <el-form-item label="开始日期" prop="startTime">
      <el-date-picker v-model="form.startTime" value-format="yyyy-MM-dd" @change="changeDate(true)">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="结束日期" prop="startTime">
      <el-date-picker v-model="form.endTime" value-format="yyyy-MM-dd" @change="changeDate(false)">
      </el-date-picker>
    </el-form-item>

  </el-form>
</template>

<script>
export default {
  mounted() {
    // console.log('-----store', this.$store.state)
    // console.log('-----route', this.$route)
  },
  data() {
    return {
      form: {
        startTime: '',
        endTime: '',
      },
    }
  },
  methods: {
    changeDate(flag) {
      if (flag) {
        if (this.form.endTime) {
          if (this.form.startTime > this.form.endTime && this.form.startTime !== null) {
            this.form.startTime = null
            this.$message({ message: '开始时间不能大于结束时间', type: 'error' })
          }
        }
      } else {
        if (this.form.startTime) {
          if (this.form.startTime > this.form.endTime && this.form.endTime !== null) {
            this.form.endTime = null
            this.$message({ message: '结束时间不能小于开始时间', type: 'error' })
          }
        }
      }
    },
  },
}
</script>

<style scoped>
</style>